{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% import 'IcsocIvrBundle:Ivr:node_fields.html.twig' as ivr %}

<form class="form-horizontal" action="" method="post" name="form">
    {{ ivr.node_name()  }}
    <div class="form-group" id="form_conditions">
        <label class="col-sm-3 control-label no-padding-right">{{ 'Conditions'|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <div id="form_and">
                <h6 class="col-sm-12 align-left control-label">{{ '满足以下所有条件' }} </h6>
               {# <div id="form_and_0" style="margin-bottom: 1px">
                    <select id="form_and_variable_0" class="variable" style="width: 180px">
                        <option value="">请选择一个数字变量</option>\
                    </select>
                    <select id="form_and_relation_0" class="conditions" style="width: 50px">
                        <option value=">"> > </option>
                        <option value="<"> < </option>
                        <option value="=="> = </option>
                        <option value=">="> >= </option>
                        <option value="<="> <= </option>
                        <option value="!="> != </option>
                    </select>
                    <input type="text" id="form_and_conditions_0" class="input-sm" style="width: 125px">
                    <button id="form_and_minus_0" class="btn btn-info btn-xs minus" type="button" title="">
                        <i class="ace-icon fa fa-minus"></i>
                    </button>
                </div>#}
                <button type="button" id="form_and_btn" class="btn btn-white btn-primary btn-sm add-conditions">
                    <i class="ace-icon fa fa-plus"></i> {{ '添加判断条件' }}
                </button>
            </div>
            <div id="form_or">
                <h6 for="" class="col-sm-12 align-left control-label">{{ '满足以下任意条件' }} </h6>
               {# <div id="form_or_0" style="margin-bottom: 1px">
                    <select id="form_or_variable_0" class="variable" style="width: 180px">
                        <option value="">请选择一个数字变量</option>
                    </select>
                    <select id="form_or_relation_0" class="conditions" style="width: 50px">
                        <option value=">"> > </option>
                        <option value="<"> < </option>
                        <option value="=="> = </option>
                        <option value=">="> >= </option>
                        <option value="<="> <= </option>
                        <option value="!="> != </option>
                    </select>
                    <input type="text" id="form_or_conditions_0" class="input-sm" style="width: 125px">
                    <button id="form_or_minus_0" class="btn btn-info btn-xs minus" type="button" title="">
                        <i class="ace-icon fa fa-minus"></i>
                    </button>
                </div>#}
                <button type="button" id="form_or_btn" class="btn btn-white btn-primary btn-sm add-conditions">
                    <i class="ace-icon fa fa-plus"></i> {{ '添加判断条件' }}
                </button>
            </div>
        </div>
    </div>
    {{ ivr.jump_nodes(nodes) }}
    {{ ivr.ivr_count() }}
    <div class="clearfix well well-sm">
        <div class="col-md-offset-4 col-md-8">
            {{ button('Save', 'btn-node-attr') }}
        </div>
    </div>
    <input type="hidden" id="node_type" value="">
</form>
<script language="JavaScript" type="application/javascript">
    $(document).ready(function(){
        setVariableOption($('#form_and_variable_0'));
        setVariableOption($('#form_or_variable_0'));

        $('#form_and_minus_0').on('click', function() {
            $(this).parent().remove();
        });
        $('#form_or_minus_0').on('click', function() {
            $(this).parent().remove();
        });
    });

    var form_and_index = 0;
    var form_or_index = 0;

    $('.add-conditions').on('click', function() {
        var id = $(this).parent().attr('id');
       if (id == 'form_and') {
          var conditionsIndex = form_and_index;
       } else {
           var conditionsIndex = form_or_index;
       }

        var $content = conditionsView(id, conditionsIndex);
        $content.insertBefore($(this));
        setVariableOption($('#'+id+'_variable_'+conditionsIndex));

        $('#'+id+'_minus_'+conditionsIndex).on('click', function() {
            $(this).parent().remove();
        });
        if (id == 'form_and') {
            form_and_index++
        } else {
            form_or_index++
        }
    });

    function conditionsView(id,index)
    {
        var $content = $('<div id="'+id+'_'+index+'" style="margin-bottom: 1px">\
                            <select id="'+id+'_variable_'+index+'" style="width: 180px">\
                                <option value="">请选择一个数字变量</option>\
                            </select>\
                            <select id="'+id+'_relation_'+index+'" class="sound_number" style="width: 60px">\
                                <option value=">"> > </option>\
                                <option value="<"> < </option>\
                                <option value="=="> = </option>\
                                <option value=">="> >= </option>\
                                <option value="<="> <= </option>\
                                <option value="!="> != </option>\
                                <option value="regex"> 正则 </option>\
                            </select>\
                            <input type="text" id="'+id+'_conditions_'+index+'" class="input-sm" style="width: 125px">\
                            <button id="'+id+'_minus_'+index+'" class="btn btn-info btn-xs minus" type="button" title="">\
                                <i class="ace-icon fa fa-minus"></i>\
                            </button>\
                         </div>');
        return $content;
    }

    function handleConditionsView(treeNodeChild) {
        if (treeNodeChild.and) {
            $.each(treeNodeChild.and,function(index,childNode){
                //if (index != 0 ) {
                    var $content = conditionsView('form_and',index);
                    $content.insertBefore($('#form_and_btn'));
                    setVariableOption($('#form_and_variable_'+index));
                //}
                $('#form_and_variable_'+index).val(childNode.variable_name);
                $('#form_and_relation_'+index).val(childNode.relation);
                $('#form_and_conditions_'+index).val(childNode.conditions);

                $('#form_and_minus_'+index).on('click', function() {
                    $(this).parent().remove();
                });
                form_and_index++;
            });
        }

        if (treeNodeChild.or) {
            $.each(treeNodeChild.or,function(index,childNode){
               // if (index != 0 ) {
                    var $content = conditionsView('form_or',index);
                    $content.insertBefore($('#form_or_btn'));
                    setVariableOption($('#form_or_variable_'+index));

               // }
                $('#form_or_variable_'+index).val(childNode.variable_name);
                $('#form_or_relation_'+index).val(childNode.relation);
                $('#form_or_conditions_'+index).val(childNode.conditions);
                $('#form_or_minus_'+index).on('click', function() {
                    $(this).parent().remove();
                });
                form_or_index++
            });
        }
    }
</script>